<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import type { AddEmployee } from '@/types/employees'
import type { ElForm } from 'element-plus'
import { transListToTreeData } from '@/utils'
import type { depts } from '@/types/departments'
import { getDepartmentsApi } from '@/api/departments'
// @ts-ignore
import { FormRules } from 'element-plus'
import { addEmployeeApi } from '@/api/employees'
import { ElMessage } from 'element-plus'

// 控制弹层的隐藏显示
const showDialog = ref(false)
const showDialogFn = () => {
  showDialog.value = true
}
defineExpose({
  showDialogFn
})

// 关闭弹层
const closeDialog = () => {
  showDialog.value = false
  // 重置表单
  formRef.value?.resetFields()
}

// 声名表单数据
const formRef = ref<InstanceType<typeof ElForm> | null>(null)
const formModel = ref<AddEmployee>({
  username: '',
  mobile: '',
  timeOfEntry: '',
  formOfEmployment: '',
  workNumber: '',
  departmentName: '',
  correctionTime: ''
})
// 表单校验
//校验规则可以是响应式数据也可以不是响应式数据
const rules = ref<FormRules<AddEmployee>>({
  username: [
    { required: true, message: '用户姓名不能为空', trigger: ['blur', 'change'] },
    { min: 1, max: 4, message: '用户姓名为1-4位', trigger: ['blur', 'change'] }
  ],
  mobile: [
    { required: true, message: '手机号不能为空', trigger: ['blur', 'change'] },
    { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: ['blur', 'change'] }
  ],
  formOfEmployment: [{ required: true, message: '聘用形式不能为空', trigger: ['blur', 'change'] }],
  workNumber: [{ required: true, message: '工号不能为空', trigger: ['blur', 'change'] }],
  departmentName: [{ required: true, message: '部门不能为空', trigger: ['blur', 'change'] }],
  timeOfEntry: [{ required: true, message: '请选择入职时间', trigger: ['blur', 'change'] }],
  correctionTime: [{ required: true, message: '请选择转正时间', trigger: ['blur', 'change'] }]
})

// 渲染聘用形式
const formOfEmployeeData = [
  { label: '正式', value: 1 },
  { label: '非正式', value: 2 }
]

// 展示树状结构树状列表
const list = ref<depts[]>()
const getDepartmentList = async () => {
  const res = await getDepartmentsApi()
  list.value = transListToTreeData<depts>(res.data.depts, '')
}
const defaultProps = {
  children: 'children',
  label: 'name'
}

// 新增员工 确定按钮
const emits = defineEmits<{ (e: 'updataList'): void }>()
const onSubmit = async () => {
  // 表单校验
  await formRef.value?.validate()
  // 新增员工
  await addEmployeeApi(formModel.value)
  // 提示用户
  ElMessage.success('新增成功')
  // 关闭弹层
  closeDialog()
  // 重新渲染最后一页的数据
  emits('updataList')
}
onMounted(() => {
  getDepartmentList()
})
</script>

<template>
  <el-dialog title="新增员工" v-model="showDialog" top="8vh" :close-on-click-modal="false">
    <!-- 表单 -->
    <el-form label-width="120px" ref="formRef" :model="formModel" :rules="rules">
      <el-form-item label="姓名" prop="username">
        <el-input style="width: 50%" placeholder="请输入姓名" v-model="formModel.username" />
      </el-form-item>
      <el-form-item label="手机" prop="mobile">
        <el-input style="width: 50%" placeholder="请输入手机号" v-model="formModel.mobile" />
      </el-form-item>
      <el-form-item label="入职时间" prop="timeOfEntry">
        <el-date-picker style="width: 50%" placeholder="请选择入职时间" v-model="formModel.timeOfEntry" />
      </el-form-item>
      <el-form-item label="聘用形式" prop="formOfEmployment">
        <el-select style="width: 50%" placeholder="请选择" v-model="formModel.formOfEmployment">
          <el-option v-for="item in formOfEmployeeData" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="工号" prop="workNumber">
        <el-input style="width: 50%" placeholder="请输入工号" v-model="formModel.workNumber" />
      </el-form-item>
      <el-form-item label="部门" prop="departmentName">
        <el-tree-select v-model="formModel.departmentName" :props="defaultProps" :data="list" :render-after-expand="false"
      /></el-form-item>
      <el-form-item label="转正时间" prop="correctionTime">
        <el-date-picker style="width: 50%" placeholder="请选择转正时间" v-model="formModel.correctionTime" />
      </el-form-item>
    </el-form>
    <!-- footer插槽 -->
    <template #footer>
      <el-button @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="onSubmit">确定</el-button>
    </template>
  </el-dialog>
</template>
<style scoped></style>
